<template>
  <div class="pricing-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="gradient-title">
        <el-icon><MagicStick /></el-icon>
        智能求职加速器
      </h1>
      <p class="page-subtitle">按需付费，只为实际效果买单</p>
    </div>

    <!-- 核心定价卡片 -->
    <div class="pricing-cards">
      <!-- 基础优化包 -->
      <div class="pricing-card starter primary">
        <div class="card-header">
          <h3>尝鲜体验</h3>
          <p class="card-subtitle">零风险入门</p>
          <div class="price">
            <span class="amount">¥0</span>
          </div>
          <div class="bulk-discount">
            <el-tag type="success" effect="dark">赠送3次</el-tag>
          </div>
          <el-button type="primary" plain round @click="showSignup">立即体验</el-button>
        </div>
        <div class="card-features">
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>1次基础简历优化</span>
          </div>
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>岗位匹配度分析</span>
          </div>
        </div>
      </div>

      <!-- 按次付费（主推） -->
      <div class="pricing-card primary">
        <div class="card-header">
          <h3>按次付费</h3>
          <p class="card-subtitle">灵活高效之选</p>
          <div class="price">
            <span class="amount">¥99</span>
            <span class="unit">/次</span>
          </div>
          <div class="bulk-discount">
            <el-tag type="success" effect="dark">买3送1</el-tag>
            <el-tag type="warning" effect="dark">买5送2</el-tag>
          </div>
          <el-button type="primary" round @click="buySingle">立即购买</el-button>
        </div>
        <div class="card-features">
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>专家级简历优化</span>
          </div>
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>智能岗位推荐</span>
          </div>
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>7天无限修改</span>
          </div>
        </div>
      </div>

      <!-- 会员订阅 -->
      <div class="pricing-card vip primary">
        <div class="card-header">
          <h3>求职加速包</h3>
          <p class="card-subtitle">3个月求职护航</p>
          <div class="price">
            <span class="amount">¥299</span>
          </div>
          <div class="bulk-discount">
            <el-tag type="success" effect="dark">具体详谈</el-tag>
          </div>
          <el-button type="primary" plain round @click="showVip">了解详情</el-button>
        </div>
        <div class="card-features">
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>5次专家优化服务</span>
          </div>
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>无限次AI快速优化</span>
          </div>
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>面试情景模拟（3次）</span>
          </div>
          <div class="feature-item">
            <el-icon><CircleCheck /></el-icon>
            <span>专属求职分析报告</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 转化助推模块 -->
    <div class="conversion-booster">
      <div class="booster-card">
        <div class="booster-content">
          <h3>🤝 推荐有礼</h3>
          <p>每成功推荐1位朋友，双方各得1次免费优化机会</p>
          <el-button type="success" round>立即邀请</el-button>
        </div>
      </div>
      <div class="booster-card">
        <div class="booster-content">
          <h3>🎁 限时福利</h3>
          <p>首次充值¥200立送¥50余额，有效期90天</p>
          <el-button type="warning" round>马上领取</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 交互逻辑示例
const showSignup = () => {
  // 跳转注册流程
}

const buySingle = () => {
  // 单次购买流程
}

const showVip = () => {
  // 展示会员详情
}
</script>

<style lang="scss" scoped>
.pricing-page {

  .pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 2rem auto;

    .pricing-card {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      position: relative;
      transition: all 0.3s;
      border: 2px solid #ebeef5;

      &.primary {
        border-color: var(--primary-color);
        transform: translateY(-10px);
        box-shadow: 0 8px 24px rgba(64, 158, 255, 0.15);
      }

      .card-badge {
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--success-color);
        color: white;
        padding: 6px 24px;
        border-radius: 20px;
        font-size: 0.9rem;
      }

      .card-header {
        text-align: center;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #f8f9fa;

        h3 {
          font-size: 1.8rem;
          margin: 0 0 0.5rem;
        }

        .card-subtitle {
          color: #909399;
          margin-bottom: 1rem;
        }

        .price {
          margin: 1.5rem 0;
          .amount {
            font-size: 2.5rem;
            font-weight: 600;
            color: var(--primary-color);
          }
          .unit {
            color: #909399;
            font-size: 1rem;
          }
        }

        .bulk-discount {
          margin: 1rem 0;
          display: flex;
          gap: 8px;
          justify-content: center;
        }

        .el-button {
          width: 100%;
          padding: 12px;
          font-size: 1.1rem;
          margin-top: 1rem;
        }
      }

      .card-features {
        .feature-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 0;
          color: #606266;
          border-bottom: 1px dashed #eee;

          &:last-child {
            border-bottom: none;
          }

          .el-icon {
            color: var(--primary-color);
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  .conversion-booster {
    max-width: 1200px;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;

    .booster-card {
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
      border-radius: 12px;
      padding: 2rem;
      border: 1px solid #ebeef5;

      .booster-content {
        text-align: center;
        h3 {
          color: var(--primary-color);
          margin: 0 0 1rem;
        }
        p {
          color: #606266;
          margin: 1rem 0;
        }
      }
    }
  }
}
</style>